import { useRef, useContext } from 'react';
import { Dialog, Input, Toast, Form } from 'antd-mobile';
import { FormInstance } from 'antd-mobile/es/components/form'
import { EditSOutline } from 'antd-mobile-icons'
import { useHistory } from 'react-router-dom';
import { globalJump } from '../../../utils';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const inputRef = useRef(null);
  const mySdkStore = useContext(MySdkStoreContext);
  const history = useHistory();
  const formRef = useRef(null);

  const handleLogin = async (data) => {
    const { userId, appId} = data;

    // const userId = inputRef.current.nativeElement.value;

    // if(!userId) {
    //   return;
    // }

    (document as any).cookie = `im_userId=${userId}`;
    (document as any).cookie = `im_appId=${appId}`;
    mySdkStore.setVal('showLogin', false);
    // history.push({ pathname: '/' });
    globalJump('');
  }

  const content = <Form
    ref={formRef}
    onFinish={(data) => {
      handleLogin(data)
    }}
  >
    <Form.Item name='userId' label='userId' help='已经添加的用户id' rules={[{ required: true, message: 'userId不能为空' }]} >
      <Input ref={inputRef} onChange={console.log} placeholder='请输入userId' />
    </Form.Item>
    <Form.Item name='appId' label='appId' help='im+分配的appId' rules={[{ required: true, message: 'appId不能为空' }]}>
      <Input onChange={console.log} placeholder='请输入appId' />
    </Form.Item>
  </Form>

  // const content = <>
  //   <Input ref={inputRef} className="inputBox" placeholder="请输入" />
  //   {/* <div className="tipBar">
  //     没有ID？<a onClick={handleGetId}>点击获取ID</a>
  //   </div> */}
  //   <Input ref={inputRef} className="inputBox" placeholder="请输入" />
  // </>

  return (<div className="loginByUserIdPage">
    <Dialog
      title={
      <div>登录<EditSOutline style={{float: 'right', marginTop: '4px'}} onClick={() => {
        history.push({ pathname: '/changeBaseConfig' });
      }} /></div>
    }
      visible
      content={content}
      closeOnAction
      // onClose={() => {
      //   setVisible(false)
      // }}
      actions={[
        [
          {
            key: 'cancel',
            text: '取消',
            style: { color: '#000' },
            onClick: () => Toast.show('请先登录')
          },
          {
            key: 'confirm',
            text: '登录',
            onClick: () =>  formRef.current?.submit()
          },
        ]
      ]}
    />
  </div>)
}